import React from 'react';
import {
    Box,
    Typography,
    Chip,
    Tooltip,
    CircularProgress,
    IconButton
} from '@mui/material';
import {
    Sync,
    Check,
    Error as ErrorIcon,
    Link as LinkIcon,
    LinkOff
} from '@mui/icons-material';
import { useFileSync } from '../../hooks/fileSystem/index.ts';

/**
 * 同步状态指示器组件属性
 */
interface SyncStatusIndicatorProps {
    showControls?: boolean;
    variant?: 'chip' | 'text' | 'icon';
    size?: 'small' | 'medium';
}

/**
 * 同步状态指示器组件
 * 显示当前文件同步状态和控制按钮
 */
const SyncStatusIndicator: React.FC<SyncStatusIndicatorProps> = ({
    showControls = true,
    variant = 'chip',
    size = 'small'
}) => {
    const {
        syncState,
        startSync,
        toggleSync,
        hasSyncFolder,
        isSyncing,
        hasError
    } = useFileSync();

    // 处理开始同步按钮点击
    const handleSyncClick = () => {
        startSync();
    };

    // 处理开关同步按钮点击
    const handleToggleSync = () => {
        toggleSync();
    };

    // 计算状态文本和颜色
    const getStatusInfo = () => {
        if (!hasSyncFolder) {
            return { text: '未连接', color: 'default', icon: <LinkOff fontSize="inherit" /> };
        }

        if (isSyncing) {
            return { text: '同步中', color: 'info', icon: <CircularProgress size={16} /> };
        }

        if (hasError) {
            return { text: '同步错误', color: 'error', icon: <ErrorIcon fontSize="inherit" /> };
        }

        if (syncState.syncEnabled) {
            return { text: '已连接', color: 'success', icon: <Check fontSize="inherit" /> };
        }

        return { text: '已暂停', color: 'warning', icon: <LinkIcon fontSize="inherit" /> };
    };

    const { text, color, icon } = getStatusInfo();

    // 根据不同变体渲染
    const renderContent = () => {
        switch (variant) {
            case 'text':
                return (
                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                        <Typography
                            variant={size === 'small' ? 'caption' : 'body2'}
                            color={`${color}.main`}
                            sx={{ display: 'flex', alignItems: 'center' }}
                        >
                            {icon}
                            <Box component="span" sx={{ ml: 0.5 }}>{text}</Box>
                        </Typography>

                        {showControls && hasSyncFolder && (
                            <Tooltip title="开始同步">
                                <IconButton
                                    onClick={handleSyncClick}
                                    size="small"
                                    sx={{ ml: 0.5 }}
                                    disabled={isSyncing}
                                >
                                    <Sync fontSize="inherit" />
                                </IconButton>
                            </Tooltip>
                        )}
                    </Box>
                );

            case 'icon':
                return (
                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                        <Tooltip title={text}>
                            <Box sx={{
                                color: `${color}.main`,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center'
                            }}>
                                {icon}
                            </Box>
                        </Tooltip>

                        {showControls && hasSyncFolder && (
                            <Tooltip title="开始同步">
                                <IconButton
                                    onClick={handleSyncClick}
                                    size="small"
                                    sx={{ ml: 0.5 }}
                                    disabled={isSyncing}
                                >
                                    <Sync fontSize="inherit" />
                                </IconButton>
                            </Tooltip>
                        )}
                    </Box>
                );

            case 'chip':
            default:
                return (
                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                        <Chip
                            icon={icon}
                            label={text}
                            size={size}
                            color={color as any}
                            variant="outlined"
                        />

                        {showControls && hasSyncFolder && (
                            <Tooltip title="开始同步">
                                <IconButton
                                    onClick={handleSyncClick}
                                    size="small"
                                    sx={{ ml: 0.5 }}
                                    disabled={isSyncing}
                                >
                                    <Sync fontSize="inherit" />
                                </IconButton>
                            </Tooltip>
                        )}
                    </Box>
                );
        }
    };

    return (
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
            {renderContent()}
        </Box>
    );
};

export default SyncStatusIndicator; 